<template>
	<view class="tools">
		<tui-tab style="width: 100%;" sliderHeight="0" :tabs="list" :size="30" bold color="#999" selectedColor="#07c160"
			sliderBgColor="#07c160" :current="current" scroll @change="sectionChange"></tui-tab>
		<view v-show="current == 0">
			<!-- <tui-list-view title="不带箭头，无点击效果" color="#777">
				<tui-list-cell hover="{{false}}">
					不带箭头，无点击效果
				</tui-list-cell>
			</tui-list-view> -->
			<tui-list-view>
				<tui-list-cell class="flex1" style="justify-content: space-between;" arrow @click="changeType">
					<text>选择计算方式</text>
					<text style="margin-right: 20rpx;">{{typeMap[type]}}</text>
				</tui-list-cell>
				<tui-list-cell class="flex1" style="justify-content: space-between;">
					<text>商业贷款金额(万元)</text>
					<tui-input v-model="amount" textRight placeholder="请输入商业贷款金额" />
				</tui-list-cell>

				<tui-list-cell class="flex1" arrow style="justify-content: space-between;" @click="showPeriod = true">
					<text>贷款期限</text>
					<text style="margin-right: 20rpx;">{{periodMap[period]}}</text>
				</tui-list-cell>
				<tui-list-cell class="flex1" arrow style="justify-content: space-between;" @click="showRate = true">
					<text>商业贷款年利率</text>
					<text style="margin-right: 20rpx;">{{(rate * 100).toFixed(3) + '%'}}</text>
				</tui-list-cell>

			</tui-list-view>
		</view>
		<view v-show="current == 1">
			<tui-list-view>
				<tui-list-cell class="flex1" arrow style="justify-content: space-between;" @click="changeType">
					<text>选择计算方式</text>
					<text style="margin-right: 20rpx;">{{typeMap[type]}}</text>
				</tui-list-cell>
				<tui-list-cell class="flex1" style="justify-content: space-between;">
					<text>公积金贷款金额(万元)</text>
					<tui-input v-model="gjjAmount" textRight placeholder="请输入公积金贷款金额" />
				</tui-list-cell>
				<tui-list-cell class="flex1" style="justify-content: space-between;" @click="showPeriod = true">
					<text>贷款期限</text>
					<text style="margin-right: 20rpx;">{{periodMap[period]}}</text>
				</tui-list-cell>
				<tui-list-cell class="flex1" style="justify-content: space-between;" @click="showGjjRate = true">
					<text>公积金贷款年利率</text>
					<text style="margin-right: 20rpx;">{{(gjjRate * 100).toFixed(3) + '%'}}</text>
				</tui-list-cell>
			</tui-list-view>
		</view>
		<view v-show="current == 2">
			<tui-list-view>
				<tui-list-cell class="flex1" arrow style="justify-content: space-between;" @click="changeType">
					<text>选择计算方式</text>
					<text style="margin-right: 20rpx;">{{typeMap[type]}}</text>
				</tui-list-cell>
				<tui-list-cell class="flex1" arrow style="justify-content: space-between;" @click="showPeriod = true">
					<text>贷款期限</text>
					<text style="margin-right: 20rpx;">{{periodMap[period]}}</text>
				</tui-list-cell>
				<tui-list-cell class="flex1" style="justify-content: space-between;">
					<text>商业贷款金额(万元)</text>
					<tui-input v-model="amount" textRight placeholder="请输入商业贷款金额" />
				</tui-list-cell>

				<tui-list-cell class="flex1" style="justify-content: space-between;" arrow @click="showRate = true">
					<text>商业贷款年利率</text>
					<text style="margin-right: 20rpx;">{{(rate * 100).toFixed(3) + '%'}}</text>
				</tui-list-cell>
				<tui-list-cell class="flex1" style="justify-content: space-between;">
					<text>公积金贷款金额(万元)</text>
					<tui-input v-model="gjjAmount" textRight placeholder="请输入公积金贷款金额" />
				</tui-list-cell>

				<tui-list-cell class="flex1" style="justify-content: space-between;" arrow @click="showGjjRate = true">
					<text>公积金贷款年利率</text>
					<text style="margin-right: 20rpx;">{{(gjjRate * 100).toFixed(3) + '%'}}</text>
				</tui-list-cell>
			</tui-list-view>
		</view>
		<button class="calc" @tap="calc()">开始计算</button>
		<view class="reslut">
			<view class="tabs">
				<view class="tab" @tap="changeResultType(0)" :class="{active: type == '0'}">等额本息</view>
				<view class="tab" @tap="changeResultType(1)" :class="{active: type == '1'}">等额本金</view>
			</view>
			<view class="content">
				<view class="top">
					<view class="title">每月月供参考(元)</view>
					<view class="month">{{reslut.monthAmount}}</view>
				</view>
				<view class="bottom">
					<view class="col">
						<view class="title">还款总额(万元)</view>
						<view class="total">{{reslut.totalReturnAmount}}</view>
					</view>
					<view class="col">
						<view class="title">贷款总额(万元)</view>
						<view class="total">{{reslut.totalAmount}}</view>
					</view>
					<view class="col">
						<view class="title">支付利息(万元)</view>
						<view class="total">{{reslut.rateAmount}}</view>
					</view>
				</view>
				<view class="btns">
					<button class="btn" @tap="reset">重新计算</button>
					<button class="btn" @tap="resultDetail">还款数据明细</button>
				</view>
				<view class="tips">
					<text v-show="type == '0'" class="title">等额本息：每月还款额固定，其中本金部分逐月递增、利息部分逐月递减</text>
					<text v-show="type == '1'" class="title">等额本金：每月还款额递减，其中本金部分固定、利息部分逐月递减</text>
				</view>
			</view>
		</view>
		<tui-select textField="label" :list="typeList" :show="showType" @confirm="typeConfirm($event);showType=false"
			@close="showType=false"></tui-select>

		<tui-select textField="label" :list="periodList" :show="showPeriod" @confirm="periodConfirm($event);showPeriod=false"
			@close="showPeriod=false"></tui-select>

		<tui-select textField="label" :list="rateList" :show="showRate" @confirm="rateConfirm($event);showRate=false"
			@close="showRate=false"></tui-select>

		<tui-select textField="label" :list="gjjRateList" :show="showGjjRate"
			@confirm="gjjRateConfirm($event);showGjjRate=false" @close="showGjjRate=false"></tui-select>

		<tui-select textField="label" :list="listAmount" :show="showResultList" @confirm="showResultList=false"
			@close="showResultList=false"></tui-select>

		<!-- <u-select v-model="showPeriod" :list="periodList" @confirm="periodConfirm"></u-select> -->
		<!-- <u-select v-model="showRate" :list="rateList" @confirm="rateConfirm"></u-select> -->
		<!-- <u-select v-model="showGjjRate" :list="gjjRateList" @confirm="gjjRateConfirm"></u-select> -->
		<!-- <u-select v-model="showResultList" :list="listAmount"></u-select> -->
		<tui-modal :show="showCustomeRate" custom>
			<view class="tui-modal-custom">
				<view class="" style="text-align: center;">温馨提示</view>
				<view class="tui-modal-custom-text">
					<view class="slot-content">
						<view style="padding: 0 30upx;">
							<tui-input v-model="customeRate" textCenter placeholder="请输入贷款利率(%)" />
						</view>
					</view>
				</view>
				<tui-button height="72rpx" :size="28" type="danger" shape="circle" @click="customeConfirm($event);showCustomeRate=false">确定</tui-button>
			</view>
		</tui-modal>
		<!-- <tui-modal custom :show="!showCustomeRate" @click="customeConfirm" @cancel="showCustomeRate=false" title="提示"
			>
			<view class="slot-content">
				<view style="padding: 0 30upx;">
					<tui-input v-model="customeRate" textCenter placeholder="请输入贷款利率(%)" />
				</view>
			</view>
		</tui-modal> -->
		<tui-toast ref="uToast"></tui-toast>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				colors: '',
				list: [{
						name: '商业贷款'
					},
					{
						name: '公积金贷款'
					},
					{
						name: '组合贷款'
					}
				],
				current: 0,
				showType: false,
				typeList: [{
						value: '0',
						label: '等额本息'
					},
					{
						value: '1',
						label: '等额本金'
					}
				],
				typeMap: {
					"0": "等额本息",
					"1": "等额本金"
				},
				showCustomeRate: false,
				showPeriod: false,
				periodMap: {},
				periodList: [],
				showRate: false,
				rateList: [{
						value: '0.04165',
						label: '基准利率8.5折(4.165%)'
					},
					{
						value: '0.0441',
						label: '基准利率9折(4.41%)'
					},
					{
						value: '0.04655',
						label: '基准利率9.5折(4.655%)'
					},
					{
						value: '0.049',
						label: '基准利率(4.9%)'
					},
					{
						value: '0.0539',
						label: '基准利率1.1倍(5.39%)'
					},
					{
						value: '0.0588',
						label: '基准利率1.2倍(5.88%)'
					},
					{
						value: '0',
						label: '自定义'
					}
				],
				showGjjRate: false,
				gjjRateList: [{
						value: '0.0325',
						label: '基准利率(3.25%)'
					},
					{
						value: '0.03575',
						label: '基准利率1.1倍(3.575%)'
					},
					{
						value: '0.039',
						label: '基准利率1.2倍(3.9%)'
					},
					{
						value: '0',
						label: '自定义'
					}
				],
				type: "0",
				amount: undefined,
				gjjAmount: undefined,
				period: 20,
				rate: "0.049",
				gjjRate: "0.0325",
				customeRate: undefined,
				customeType: undefined,
				showResultList: false,
				reslut: {
					monthAmount: 0,
					totalAmount: 0,
					totalReturnAmount: 0,
					rateAmount: 0,
				},
				groupResult: {},
				listAmount: [],
				resultType: 0
			};
		},
		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let periodList = [];
			let periodMap = {};
			for (var i = 1; i <= 30; i++) {
				let label = i + '年' + ' (' + i * 12 + '期)';
				periodList.push({
					value: i,
					label: label
				});
				periodMap[i] = label;
			}
			let rateMap = {};
			for (var i = 0; i < this.rateList.length; i++) {
				let item = this.rateList[i];
				rateMap[item.value] = item.label;
			}
			this.colors = '0081ff';
			this.periodList = periodList;
			this.periodMap = periodMap;
			this.rateMap = rateMap;

		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			// 重置
			reset() {
				this.type = "0";
				this.amount = undefined;
				this.gjjAmount = undefined;
				this.period = 20;
				this.rate = "0.049";
				this.gjjRate = "0.0325";
				this.customeRate = undefined;
				this.customeType = undefined;
				this.reslut = {
					monthAmount: 0,
					totalAmount: 0,
					totalReturnAmount: 0,
					rateAmount: 0,
				};
				this.groupResult = {};
			},
			sectionChange(e) {
				console.log(e)
				this.current = e.index;
				this.reset();
			},
			changeResultType(type) {
				this.type = type;
				this.reslut = type == 0 ? this.groupResult["bx"] : this.groupResult["bj"];
			},
			resultDetail() {
				if (this.type == 0) {
					this.$refs.uToast.show({
						title: "等额本息还款固定",
						icon: 'warning'
					});
					return;
				}
				this.showResultList = true
			},
			calc() {
				if (this.current == 2) {
					this.calcGroup();
				} else {
					this.calcSimple();
				}
			},
			calcSimple() {
				//商业贷款、公积金贷款
				let lilv = this.current == 0 ? this.rate : this.gjjRate; //得到利率
				//贷款总额
				let daikuan_total = this.current == 0 ? this.amount * 10000 : this.gjjAmount * 10000;
				//还款周期
				let month = this.period * 12;
				let groupResult = {};
				let listAmount = [];
				//1.本金还款
				if (true) {
					//月还款
					let totalReturnAmount = 0;
					let firstAmount = 0;
					for (let j = 0; j < month; j++) {
						//调用函数计算: 本金月还款额
						let huankuan = this.getMonthMoney2(lilv, daikuan_total, month, j);
						totalReturnAmount += huankuan;
						huankuan = Math.round(huankuan * 100) / 100;
						if (j == 0) {
							firstAmount = huankuan;
						}
						listAmount.push({
							"value": (j + 1) + "月",
							"label": '第' + (j + 1) + "月       还 " + huankuan + '元'
						})
					}
					//还款总额
					let total = Math.round(totalReturnAmount * 100) / 100;
					//支付利息款
					let lx = Math.round((totalReturnAmount - daikuan_total) * 100) / 100;
					let reslut = {
						totalAmount: (daikuan_total / 10000).toFixed(2),
						monthAmount: firstAmount.toFixed(2),
						totalReturnAmount: (total / 10000).toFixed(2),
						rateAmount: (lx / 10000).toFixed(2),
					}
					groupResult["bj"] = reslut;
				}
				if (true) {
					//2.本息还款
					//月均还款
					let monthAmount = this.getMonthMoney1(lilv, daikuan_total, month); //调用函数计算
					monthAmount = Math.round(monthAmount * 100) / 100;
					//还款总额
					let total = monthAmount * month;
					//支付利息款
					let lx_txt = Math.round((total - daikuan_total) * 100) / 100;
					total = Math.round(total * 100) / 100;

					let reslut = {
						totalAmount: (daikuan_total / 10000).toFixed(2),
						monthAmount: monthAmount.toFixed(2),
						totalReturnAmount: (total / 10000).toFixed(2),
						rateAmount: (lx_txt / 10000).toFixed(2),
					}
					groupResult["bx"] = reslut;
				}
				this.groupResult = groupResult;
				this.listAmount = listAmount;
				this.reslut = this.type == '0' ? groupResult["bx"] : groupResult["bj"];
			},
			calcGroup() {
				//贷款总额
				let total_sy = this.amount * 10000;
				let total_gjj = this.gjjAmount * 10000;
				let daikuan_total = total_sy + total_gjj;
				//月还款
				let lilv_sd = this.rate; //得到商贷利率
				let lilv_gjj = this.gjjRate; //得到公积金利率
				let groupResult = {};
				//1.本金还款
				//月还款
				let all_total2 = 0;
				let month_money2 = "";
				let month = this.period * 12;
				let firstAmount = 0;
				let listAmount = [];
				for (let j = 0; j < month; j++) {
					//调用函数计算: 本金月还款额
					let huankuan = this.getMonthMoney2(lilv_sd, total_sy, month, j) + this.getMonthMoney2(lilv_gjj,
						total_gjj, month, j);
					all_total2 += huankuan;
					huankuan = Math.round(huankuan * 100) / 100;
					//month_money2 += (j + 1) + "月," + huankuan + "(元)\n";
					if (j == 0) {
						firstAmount = huankuan;
					}
					listAmount.push({
						"value": (j + 1) + "月",
						"label": '第' + (j + 1) + "月       还 " + huankuan + '元'
					})
				}
				//还款总额
				var all_total2_txt = Math.round(all_total2 * 100) / 100;
				//支付利息款
				var accrual2 = Math.round((all_total2 - daikuan_total) * 100) / 100;

				let reslut = {
					totalAmount: (daikuan_total / 10000).toFixed(2),
					monthAmount: firstAmount.toFixed(2),
					totalReturnAmount: (all_total2_txt / 10000).toFixed(2),
					rateAmount: (accrual2 / 10000).toFixed(2),
				}
				groupResult["bj"] = reslut;
				//2.本息还款
				//月均还款
				var month_money1 = this.getMonthMoney1(lilv_sd, total_sy, month) + this.getMonthMoney1(lilv_gjj, total_gjj,
					month); //调用函数计算
				var month_money1_txt = Math.round(month_money1 * 100) / 100;
				//还款总额
				var all_total1 = month_money1 * month;
				var all_total1_txt = Math.round(all_total1 * 100) / 100;
				//支付利息款
				var accrual1_txt = Math.round((all_total1 - daikuan_total) * 100) / 100;

				let reslut1 = {
					totalAmount: (daikuan_total / 10000).toFixed(2),
					monthAmount: month_money1_txt.toFixed(2),
					totalReturnAmount: (all_total1_txt / 10000).toFixed(2),
					rateAmount: (accrual1_txt / 10000).toFixed(2),
				}
				groupResult["bx"] = reslut1;

				this.groupResult = groupResult;
				this.listAmount = listAmount;
				this.reslut = this.type == '0' ? groupResult["bx"] : groupResult["bj"];
			},
			//本息还款的月还款额(参数: 年利率/贷款总额/贷款总月份)
			getMonthMoney1(lilv, total, month) {
				var lilv_month = lilv / 12; //月利率
				return total * lilv_month * Math.pow(1 + lilv_month, month) / (Math.pow(1 + lilv_month, month) - 1);
			},
			//本金还款的月还款额(参数: 年利率 / 贷款总额 / 贷款总月份 / 贷款当前月0～length-1)
			getMonthMoney2(lilv, total, month, cur_month) {
				var lilv_month = lilv / 12; //月利率
				var benjin_money = total / month;
				return (total - benjin_money * cur_month) * lilv_month + benjin_money;
			},
			changeType() {
				this.showType = true
			},
			typeConfirm(e) {
				if (e.options) {
					this.type = e.options.value
				}
			},
			periodConfirm(e) {
				if (e.options) {
					this.period = e.options.value
					console.log('1111', this.period)
				}
			},
			rateConfirm(e) {
				if (e.options) {
					if (e.options.value == "0") {
						this.showCustomeRate = true
						this.customeType = 0
						return
					}
					this.rate = e.options.value
				}
			},
			gjjRateConfirm(e) {
				if (e.options) {
					if (e.options.value == "0") {
						this.showCustomeRate = true
						this.customeType = 1
						return
					}
					this.gjjRate = e.options.value
				}
			},
			customeConfirm() {
				if (this.customeType == 0) {
					this.rate = Number(this.customeRate) / 100
				} else {
					this.gjjRate = Number(this.customeRate) / 100
				}

			},
		}
	};
</script>
<style lang="scss" scoped>
	page {
		background-color: #F5F5FA;
	}

	.reslut {
		margin: 20upx 20upx;
		box-shadow: 0 0.07rem 0.25rem #eff0f3;
		-webkit-box-shadow: 0 0.07rem 0.25rem #eff0f3;
		-moz-box-shadow: 0 .07rem .25rem #EFF0F3;
		-o-box-shodow: 0 .07rem .25rem #EFF0F3;
		margin-bottom: .6rem;
		border-radius: .04rem;
		border: 1px solid #E6E9F0;
	}

	.reslut .tabs {
		height: 80upx;
		line-height: 80upx;
		width: 100%;
		display: flex;
	}

	.reslut .tabs .tab {
		width: 50%;
		text-align: center;
		background-color: #F7F8FA;
	}

	.reslut .tabs .active {
		background-color: #ffffff;
	}

	.reslut .content {
		padding: 30upx 30upx;
		background-color: #ffffff;
	}

	.reslut .content .title {
		color: #868E9E;
		font-size: 26upx;
		padding-bottom: 10upx;
	}

	.reslut .content .month {
		font-size: 40upx;
		font-weight: bold;
	}

	.reslut .content .bottom {
		padding: 20upx 0;
		display: flex;
		justify-content: space-between;
	}

	.reslut .content .bottom .total {
		font-size: 30upx;
	}

	.reslut .content .btns {
		padding: 20upx 0;
		display: flex;
		justify-content: space-between;
		background-color: #ffffff;
	}

	.reslut .content .btns .btn {
		width: 300upx;
		border-radius: 100upx;
		color: #394259;
		border: 1upx solid #D1D1D1;
		background-color: #fff;
		font-size: 28upx;
	}

	.reslut .content .tips {
		padding: 20upx 0;
	}

	.calc {
		background-color: #0076FF;
		color: #ffffff;
		font-size: 30upx;
		padding: 6upx 0;
	}

	.t_input {
		padding: 20upx 4%;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.t_input .title {
		height: 80upx;
		line-height: 80upx;
		color: #333;
		font-weight: bold;
		width: 120upx;
	}

	.t_input .inputs {
		color: #333;
		font-size: 32upx;
	}

	.inputs input {
		height: 80upx;
		line-height: 80upx;
		width: 100%;
		display: block;
	}

	.all_btn {
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		width: 150upx;
	}

	.jilu {
		height: 60upx;
		line-height: 60upx;
		padding: 0 4%;
		font-size: 28upx;
		color: #999;
		font-family: Source Han Sans CN;
		font-weight: 400;
		margin-top: 10upx;
	}

	.addclerk {
		width: 80%;
		height: 82upx;
		line-height: 82upx;
		border-radius: 15upx;
		font-size: 32upx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		position: fixed;
		bottom: 30upx;
		left: 50%;
		transform: translateX(-50%);
		background-color: pink;
	}

	.addclerk:active {
		opacity: 0.8;
	}
</style>
<style>
	page {
		background-color: #F5F5FA;
	}
</style>